<template>
  <view class="checkin-container">
    <view class="checkin-header">
      <text class="title">扫码签到</text>
      <text class="subtitle">请扫描教师提供的签到二维码</text>
    </view>

    <view class="scan-section">
      <view class="scan-box" @click="startScan">
        <view class="scan-icon">
          <text class="icon">📷</text>
        </view>
        <text class="scan-text">点击扫描二维码</text>
      </view>
      
      <view class="or-divider">
        <text>或</text>
      </view>
      
      <view class="manual-input">
        <text class="input-label">手动输入签到码</text>
        <input 
          v-model="manualCode" 
          placeholder="请输入签到码" 
          class="code-input"
        />
        <button class="submit-btn" @click="manualCheckin">确认签到</button>
      </view>
    </view>

    <view class="checkin-history">
      <text class="section-title">最近签到记录</text>
      
      <view v-if="checkinRecords.length === 0" class="empty-state">
        <text>暂无签到记录</text>
      </view>
      
      <view v-else class="records-list">
        <view 
          v-for="record in checkinRecords" 
          :key="record.id"
          class="record-item"
        >
          <view class="record-info">
            <text class="course-name">{{ record.courseName }}</text>
            <text class="checkin-time">{{ record.checkinTime }}</text>
          </view>
          <text class="checkin-status success">签到成功</text>
        </view>
      </view>
    </view>

    <!-- 签到结果弹窗 -->
    <uni-popup ref="resultPopup" type="center">
      <view class="result-dialog">
        <text class="result-icon" :class="checkinResult.status">{{ 
          checkinResult.status === 'success' ? '✅' : '❌' 
        }}</text>
        <text class="result-title">{{ checkinResult.title }}</text>
        <text class="result-message">{{ checkinResult.message }}</text>
        <button class="result-btn" @click="$refs.resultPopup.close()">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { api } from '@/utils/request.js'

export default {
  data() {
    return {
      manualCode: '',
      checkinRecords: [],
      checkinResult: {
        status: 'success',
        title: '',
        message: ''
      }
    }
  },
  
  onLoad() {
    this.loadCheckinHistory()
  },
  
  methods: {
    async startScan() {
      try {
        // 检查摄像头权限
        const result = await uni.authorize({
          scope: 'scope.camera'
        })
        
        // 开始扫描
        const scanResult = await uni.scanCode({
          onlyFromCamera: true,
          scanType: ['qrCode']
        })
        
        if (scanResult.result) {
          this.processCheckin(scanResult.result)
        }
      } catch (error) {
        if (error.errMsg.includes('auth deny')) {
          uni.showModal({
            title: '提示',
            content: '需要摄像头权限才能扫描二维码，请在设置中开启权限',
            showCancel: false
          })
        } else {
          console.error('扫描失败:', error)
        }
      }
    },
    
    async manualCheckin() {
      if (!this.manualCode.trim()) {
        uni.showToast({ title: '请输入签到码', icon: 'none' })
        return
      }
      
      this.processCheckin(this.manualCode)
    },
    
    async processCheckin(sessionId) {
      try {
        const userInfo = uni.getStorageSync('userInfo')
        
        const res = await api.checkin({
          sessionId: sessionId,
          studentId: userInfo.userId
        })
        
        if (res.code === 200) {
          this.showResult('success', '签到成功', '您已成功签到！')
          this.loadCheckinHistory()
        }
      } catch (error) {
        this.showResult('error', '签到失败', error.message || '签到失败，请重试')
      }
    },
    
    showResult(status, title, message) {
      this.checkinResult = { status, title, message }
      this.$refs.resultPopup.open()
    },
    
    async loadCheckinHistory() {
      try {
        // 模拟获取签到记录
        this.checkinRecords = [
          {
            id: 1,
            courseName: 'Web前端开发',
            checkinTime: '2024-01-15 08:05',
            status: 'success'
          },
          {
            id: 2,
            courseName: '数据库原理',
            checkinTime: '2024-01-14 10:12',
            status: 'success'
          }
        ]
      } catch (error) {
        console.error('加载签到记录失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.checkin-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.checkin-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.scan-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.scan-box {
  text-align: center;
  padding: 60rpx 40rpx;
  border: 4rpx dashed #667eea;
  border-radius: 15rpx;
  margin-bottom: 40rpx;
}

.scan-icon {
  margin-bottom: 30rpx;
}

.icon {
  font-size: 80rpx;
}

.scan-text {
  font-size: 32rpx;
  color: #667eea;
  font-weight: bold;
}

.or-divider {
  text-align: center;
  margin: 40rpx 0;
  position: relative;
}

.or-divider:before,
.or-divider:after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1rpx;
  background: #e0e0e0;
}

.or-divider:before {
  left: 0;
}

.or-divider:after {
  right: 0;
}

.or-divider text {
  background: white;
  padding: 0 20rpx;
  color: #999;
}

.manual-input {
  text-align: center;
}

.input-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.code-input {
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 24rpx;
  font-size: 28rpx;
  margin-bottom: 30rpx;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.submit-btn {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 10rpx;
  padding: 24rpx;
  font-size: 28rpx;
  width: 100%;
}

.checkin-history {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.empty-state {
  text-align: center;
  padding: 60rpx;
  color: #999;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
}

.record-info {
  flex: 1;
}

.course-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.checkin-time {
  font-size: 24rpx;
  color: #666;
}

.checkin-status {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 15rpx;
}

.success {
  background: #e8f5e8;
  color: #4caf50;
}

.result-dialog {
  background: white;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  width: 500rpx;
}

.result-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 30rpx;
}

.result-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.result-message {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.result-btn {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx;
  width: 100%;
}
</style>